<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 完成一个动画效果 
     @所有人 作业:  
     完成一个动画效果:一个宽高为50px*50px 的矩形方块,
     在一个宽1000px,高500px的区域内,
     以其左上角为起点,在区域内以'W'路线进行移动,
     无限循环。要求1000px*500px的区域居中显示-->
    <style>
        div.adc {
            position: relative;
            left: 0px;
            top: 0px;
            width: 50px;
            height: 50px;
            background: rgb(18, 224, 214);
            animation-name: hhh;
            animation: hhh 5s infinite;
            animation-iteration-count: infinite;
            animation-direction: alternate;
            animation-timing-function: linear;
            animation-play-state: paused;
        }


        @keyframes hhh {
            0% {
                top: 0px;
                left: 95px;
            }

            25% {
                top: 450px;
                left: 570 px;
            }

            50% {
                top: 0px;
                left: 820px;
            }

            75% {
                top: 450px;
                left: 1070px;
            }

            100% {
                top: 0px;
                left: 1545px;
            }

        }
    </style>
    <script>
        function myPlayFunction() {
            document.getElementById("myDIV").style.animationPlayState = "running";
        }
        function myPauseFunction() {
            document.getElementById("myDIV").style.animationPlayState = "paused";
        }
    </script>
</head>

<body>


    <div class="hhh" id="myDIV">66666</div>

    <aside style="position: absolute; left: 20px; top: 550px">
        <p>点击按钮播放/暂停动画：</p>
        <button onclick="myPlayFunction()">播放</button>
        <button onclick="myPauseFunction()">暂停</button>

    </aside>
</body>

</html>